<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="rgba(0, 0, 0, 0)" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhb.png" mode="aspectFit"></image>
			</template>
			<text class="title"></text>
		</uni-nav-bar>
		<view class="body flex-r">
			<view class="poster-down flex-r">
				<image class="poster-image" v-show="imageUrl" :src="imageUrl" mode="aspectFit"></image>
			</view>
		</view>
		<view class="real">
			<view class="poster flex-r" id="poster">
				<image class="poster-bgimg" src="@/public/images/other/xrlhl.png" mode="aspectFit" @load="loadImage"></image>
				<view class="qrcode" v-if="imageLoaded">
					<vue-qr class="qr-img" :text="urlText" :size="480" :margin="0" :correctLevel="2" :callback="loadQrcode"></vue-qr>
				</view>
			</view>
		</view>
		<view class="foot bottom-ios flex-r">
			<view class="action flex-c" @tap="saveImage()">
				<image src="@/public/images/other/bctp.png" mode="aspectFit"></image>
				<text>保存图片</text>
			</view>
			<view class="action flex-c" @tap="copyLink()">
				<image src="@/public/images/other/fzlj.png" mode="aspectFit"></image>
				<text>复制链接</text>
			</view>
		</view>
	</view>
</template>

<script>
	import html2canvas from "html2canvas";
	import VueQr from "vue-qr";
	export default {
		data() {
			return {
				urlText: '',
				imageUrl: null,
				qrImageLoaded: false,
				imageLoaded: false
			}
		},
		components: {
			VueQr
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			canDown() {
				return this.qrImageLoaded && this.imageLoaded;
			}
		},
		watch: {
			canDown(newValue, oldValue) {
				if(newValue){
					this.$nextTick(()=>{
						setTimeout(()=>{
							this.downloadResult()
						}, 100)
					})
				}
			}
		},
		onLoad() {
			console.log(this.user);
			if(this.user.authCode){
				this.urlText = this.$CHS.config.hostUrl+'/user/login/'+Date.now()+'?inviteType=user&inviteCode='+this.user.authCode
			}else{
				this.urlText = this.$CHS.config.hostUrl+'/user/login/'+Date.now()
			}
			this.$ShowLoading({show: true})
		},
		onUnload() {
			this.$ShowLoading({show: false})
		},
		methods: {
			copyLink() {
				uni.setClipboardData({
					data: this.urlText,
					success() {
						uni.showToast({
							title:'邀请链接已复制',
							icon: 'success'
						})
					}
				})
			},
			saveImage() {
				let ua = navigator.userAgent.toLowerCase();
				if(ua.match(/micromessenger/i)){
					if(ua.match(/mobile/i)){
						uni.showToast({
							title: '长按图片保存到手机',
							icon: 'none',
							duration: 3000
						})
					}else{
						this.downloadResult(true)
					}
				}else{
					if(ua.match(/(mqqbrowser|huaweibrowser|iphone)/i)){
						this.downloadResult(true)
					}else if(ua.match(/ucbrowser/i)){
						uni.showToast({
							title: '当前浏览器不支持保存图片，请截图或复制链接分享',
							icon: 'none',
							duration: 3000
						})
					}else if(ua.match(/(baiduboxapp|mobile)/i)){
						uni.showToast({
							title: '长按图片保存到手机',
							icon: 'none',
							duration: 3000
						})
					}else{
						this.downloadResult(true)
					}
				}
			},
			loadImage(e) {
				if(e.detail.width){
					this.imageLoaded = true
				}
			},
			loadQrcode(img, id) {
				if(img){
					this.qrImageLoaded = true
				}
			},
			downloadResult(down=false) {
				let name = 'invite-poster-'+Date.now()
				let canvasID = document.querySelector("#poster");
				html2canvas(canvasID, {
					backgroundColor: null, // 背景颜色 
					scale: 1, // 放大 
					useCORS: true, // 使用CORS从服务器加载图像
				}).then(canvas => {
					let dom = document.body.appendChild(canvas);
					dom.style.display = "none";
					document.body.removeChild(dom);
					this.imageUrl = dom.toDataURL("image/png"); //得到图片的base64编码数据
					if(down){
						let a = document.createElement("a");
						a.style.display = "none";
						//let blob = this.dataURLToBlob(this.imageUrl);
						a.setAttribute("href", this.imageUrl);
						a.setAttribute("download", name + ".png");
						document.body.appendChild(a);
						a.click();
					}
					this.$ShowLoading({show: false})
				}).catch((err)=>{
					console.log(err);
					this.$ShowLoading({show: false})
				})
			},
			dataURLToBlob(dataurl) {
				//ie 图片转格式
				var arr = dataurl.split(","),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], { type: mime });
			},
			isWeixin() {
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == "micromessenger"){
					return true
				}else{
					return false
				}
			},
			downloadImage(imgsrc, name) {
				//下载图片地址和图片名
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute("crossOrigin", "anonymous");
				image.onload = function() {
					var canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext("2d");
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

					var a = document.createElement("a"); // 生成一个a元素
					var event = new MouseEvent("click"); // 创建一个单击事件
					a.download = name || "photo"; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
		background: #330024;
		min-height: calc(100vh - var(--vh-offset, 0px));
		position: relative;
	}
	.body{
		z-index: 2;
		align-items: center;
		margin: 40rpx 75rpx 0;
		padding-bottom: calc(75rpx + 240rpx + var(--safe-area-inset-bottom));
		min-height: 800rpx;
		background: #330024;
		.poster{
			z-index: 2;
			width: 600rpx;
			height: 840rpx;
			justify-content: center;
			position: relative;
			.poster-bgimg{
				width: 600rpx;
				height: 840rpx;
			}
			.qrcode{
				position: absolute;
				width: 280rpx;
				height: 280rpx;
				border-radius: 10rpx;
				background-color: #FFFFFF;
				margin-top: 407rpx;
				.qr-img{
					margin: 20rpx;
					width: 240rpx;
					height: 240rpx;
				}
			}
			.poster-image{
				width: 600rpx;
				height: 840rpx;
			}
		}
		.poster-down{
			width: 600rpx;
			height: 840rpx;
			z-index: 3;
			.poster-image{
				width: 600rpx;
				height: 840rpx;
			}
		}
	}
	.real{
		width: 580rpx;
		height: 800rpx;
		overflow: hidden;
		position: absolute;
		top: 136rpx;
		left: 75rpx;
		opacity: 0;
		z-index: 1;
		.poster{
			width: 600px;
			height: 840px;
			justify-content: center;
			position: absolute;
			.poster-bgimg{
				width: 600px;
				height: 840px;
			}
			.qrcode{
				position: absolute;
				width: 280px;
				height: 280px;
				border-radius: 10px;
				background-color: #FFFFFF;
				margin-top: 407px;
				.qr-img{
					margin: 20px;
					width: 240px;
					height: 240px;
				}
			}
		}
	}
	.foot{
		z-index: 5;
		max-width: $max-width;
		margin: $pc-margin;
		height: 240rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		align-items: center;
		justify-content: space-around;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		.action{
			image{
				width: 96rpx;
				height: 96rpx;
			}
			text{
				margin-top: 20rpx;
				font-size: 26rpx;
				line-height: 26rpx;
			}
		}
	}
</style>